<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block specify_title %}Django + Vuetify 3 (CDN){% endblock %}</title>

    <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}">

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>

    <!-- Vuetify 3 -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script>

    <link rel="stylesheet" href="{% static 'css/vuetify.min.css' %}">
    <script src="{% static 'js/vuetify.min.js' %}"></script>

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>

    <style>
        /* 抽屉菜单项悬停效果 */
        .v-list-item {
            transition: background-color 0.2s ease;
        }

        .v-list-item:hover {
            background-color: #e3f2fd !important;

        }

        /* 可选：更明显的效果 */
        .v-list-item.active:hover {
            background-color: rgba(25, 118, 210, 0.2) !important;
        }

        .v-card-actions .v-btn {
            margin-top: 4px;
        }

        /* 子菜单项更小的字体 */
        .v-list-item.pl-8 .v-list-item-title {
            font-size: 0.95rem;
        }

        /* 悬停背景色 */
        .v-list-item:hover {
            background-color: rgba(67, 160, 71, 0.1) !important;
        }
    </style>
    {% block login_style %}
    {% endblock %}

    {% block indext_style %}
    {% endblock %}
</head>

<body>
    <script>
        {% block other_js %}
        {% endblock %}
    </script>
    <div id="app">
        <!-- Vuetify 组件将在这里渲染 -->
        <v-app id="inspire">

            <v-app-bar color="primary" dark>

                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

                <v-app-bar-title>信息管理系统 </v-app-bar-title>
                <!-- Application -->
                {% if user.is_authenticated %}
                <!-- 欢迎信息 -->
                <span class="mr-2">欢迎，{{ user.username }} </span>
                <!-- 主题切换 -->
                <v-btn icon variant="text" @click="toggleTheme" title="更换主题">
                    |
                    <v-icon>mdi-theme-light-dark</v-icon>
                </v-btn>
                <v-btn icon variant="text" href="" title="退出登录">
                    |
                    <v-icon>mdi-logout</v-icon>
                </v-btn>
                {% else %}
                <!-- 登录 -->
                <span class="mr-2"> 请登录 </span>
                <v-btn icon variant="text" href="" title="欢迎登录">
                    |
                    <v-icon>mdi-login</v-icon>
                </v-btn>
                {% endif %}

            </v-app-bar>

            {% block drawer %}
            {% if user.is_authenticated %}
            <v-navigation-drawer v-model="drawer">
                <!--  -->
                <v-list nav dense>
                    <v-list-item v-for="(item, index) in menuItems" :key="index" :href="item.href" :title="item.title"
                        style="color: inherit; text-decoration: none;">
                        <template v-slot:prepend>
                            <v-icon :icon="item.icon" class="mr-2"></v-icon>
                        </template>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
            {% endif %}
            {% endblock %}


            <v-container fluid class="pa-4 pt-2">
            <v-main class="login-layout  align-center justify-center mb-1" >
                <!-- 主页面显示内容 -->
                {% block main %}{% endblock %}
            </v-main>
            </v-container>
        </v-app>
    </div>
    
    <script>
        
        const { createApp } = Vue;

        // 自定义浅色主题配置
        const myCustomLightTheme = {
            dark: false,
            colors: {
                // 主色调系列 (light-blue)
                primary: '#03a9f4',
                'primary-lighten-5': '#e1f5fe',
                'primary-lighten-4': '#b3e5fc',
                'primary-lighten-3': '#81d4fa',
                'primary-lighten-2': '#4fc3f7',
                'primary-lighten-1': '#29b6f6',
                'primary-darken-1': '#039be5',
                'primary-darken-2': '#0288d1',
                'primary-darken-3': '#0277bd',
                'primary-darken-4': '#01579b',

                // 状态颜色
                success: '#4caf50',
                'success-lighten-1': '#66bb6a',
                'success-darken-1': '#43a047',

                error: '#f44336',
                'error-lighten-1': '#ef5350',
                'error-darken-1': '#e53935',

                warning: '#ff9800',
                'warning-lighten-1': '#ffa726',
                'warning-darken-1': '#fb8c00',

                info: '#2196f3',
                'info-lighten-1': '#42a5f5',
                'info-darken-1': '#1e88e5',

                // 辅助色
                secondary: '#424242',
                'secondary-lighten-1': '#616161',
                'secondary-darken-1': '#212121',

                // 中性色
                background: '#fafafa',
                surface: '#ffffff',
                'on-primary': '#ffffff',
                'on-secondary': '#ffffff',
                'on-success': '#ffffff',
                'on-error': '#ffffff',
                'on-warning': '#ffffff',
                'on-info': '#ffffff',
                'on-background': '#000000',
                'on-surface': '#000000',
            }
        }

        // 对应的深色主题配置
        const myCustomDarkTheme = {
            dark: true,
            colors: {
                // 主色调系列 (深色下的 light-blue)
                primary: '#4fc3f7',
                'primary-lighten-1': '#81d4fa',
                'primary-lighten-2': '#b3e5fc',
                'primary-lighten-3': '#e1f5fe',
                'primary-darken-1': '#29b6f6',
                'primary-darken-2': '#039be5',
                'primary-darken-3': '#0288d1',
                'primary-darken-4': '#0277bd',

                // 状态颜色 (深色模式下适当调整亮度)
                success: '#66bb6a',
                'success-lighten-1': '#81c784',
                'success-darken-1': '#43a047',

                error: '#ef5350',
                'error-lighten-1': '#ff6b68',
                'error-darken-1': '#e53935',

                warning: '#ffa726',
                'warning-lighten-1': '#ffb74d',
                'warning-darken-1': '#fb8c00',

                info: '#42a5f5',
                'info-lighten-1': '#64b5f6',
                'info-darken-1': '#1e88e5',

                // 辅助色 (深色模式)
                secondary: '#bdbdbd',
                'secondary-lighten-1': '#e0e0e0',
                'secondary-darken-1': '#9e9e9e',

                // 深色中性色
                background: '#121212',
                surface: '#1e1e1e',
                'on-primary': '#000000',
                'on-secondary': '#000000',
                'on-success': '#000000',
                'on-error': '#ffffff',
                'on-warning': '#000000',
                'on-info': '#000000',
                'on-background': '#ffffff',
                'on-surface': '#ffffff',
            }
        }

        // 创建 Vuetify 实例
        const vuetify = Vuetify.createVuetify({
            theme: {
                defaultTheme: 'myCustomLightTheme',
                themes: {
                    myCustomLightTheme,
                    myCustomDarkTheme
                }
            }
        });

        // 创建 Vue 应用
        const app = createApp({
            // delimiter: ['[[', ']]'],
            data: () => ({
                drawer: false,
                theme: 'myCustomDarkTheme',
                {% if user.is_authenticated %}
                menuItems: [
                    { title: 'app1', href: '/app1/index', icon: 'mdi-cog' },
                    { title: 'app2', href: '/app2/index', icon: 'mdi-chart-bar' },
                    { title: 'app3', href: '/app3/index', icon: 'mdi-package-variant' },
                ],
                {% endif %}
                {% block vue_data %}
                {% endblock %}
            }),
            methods: {
                toggleTheme() {
                    this.theme = this.theme === 'myCustomLightTheme' ? 'myCustomDarkTheme' : 'myCustomLightTheme';
                    this.$vuetify.theme.name = this.theme;
                },
                {% block methods %}
                {% endblock %}
            },
        mounted: () => {
            {% block mounted %}
            {% endblock %}
        },
        beforeUnmount() {
            {% block before_unmount %}
            {% endblock %}
        },
        });

        // 使用 Vuetify 插件
        app.use(vuetify);
        
        // 挂载
        app.mount('#app');
    </script>

</body>

</html>